<template>
    <div id="vip-page">

        <!-- 个人会员信息查看开始 -->
        <div class="user-vip">

            <div class="description">
                <div class="left">
                    <img src="http://gips0.baidu.com/it/u=398917425,2942293409&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560"
                        alt="">
                    <div class="name">壹壹</div>
                    <div class="vip">超级大会员</div>
                    <el-button round type="warning">开通会员</el-button>
                </div>

                <div class="right">
                    <div class="label">我的算力<span>4232</span>
                            <div class="back" style="color:rgb(179, 173, 173);float:right;font-size: 15px;cursor: pointer;" @click="goBack">返回</div>
                    </div>
                    <div class="label">存储空间</div>
                    <div class="storage">
                        <div class="progress-bar">
                            <div class="progress-fill" style="width:60%;"></div>
                        </div>
                        <div class="precent">0.0G/3G</div>

                    </div>
                    <div class="label">我的权益</div>
                    <div class="rights">
                        <div class="item">
                            <svg t="1722242903660" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="5188" width="20" height="20">
                                <path d="M512 64.32L288.05 512.44l222.61 111.81-110.63 335.43 335.92-447.24-225.29-111.81z"
                                    fill="#ffd5a4" p-id="5189"></path>
                            </svg> 每日100点算力
                        </div>
                        <div class="item">
                            <svg t="1722392553573" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1545" width="20" height="20">
                                <path
                                    d="M512.064 824.192c-208.192 0-376.896-57.984-376.896-129.472L134.784 694.72l0 203.008L135.04 897.728C140.16 967.744 306.752 1024 511.68 1024c204.992 0 371.584-56.256 376.64-126.272l0.832 0 0-203.008-0.32 0C888.96 766.208 720.192 824.192 512.064 824.192z"
                                    fill="#ffd5a4" p-id="1546"></path>
                                <path
                                    d="M512.064 545.152c-208.192 0-376.896-57.984-376.896-129.472L134.784 415.68l0 203.008L135.04 618.688c5.056 70.016 171.712 126.272 376.64 126.272 204.992 0 371.584-56.256 376.64-126.272l0.832 0L889.152 415.616l-0.32 0C888.96 487.104 720.192 545.152 512.064 545.152z"
                                    fill="#ffd5a4" p-id="1547"></path>
                                <path
                                    d="M888.96 128.832c0 0.128-0.064 0.192-0.064 0.32C888.384 57.728 719.872 0 512.064 0S135.616 57.728 135.168 129.152c0-0.128-0.064-0.192-0.064-0.32L134.784 128.832l0 203.008L135.04 331.84C140.16 401.92 306.752 458.112 511.68 458.112c204.992 0 371.584-56.256 376.64-126.272l0.832 0L889.152 128.832 888.96 128.832zM512.064 219.456c-155.264 0-281.152-43.264-281.152-96.576s125.888-96.576 281.152-96.576c155.2 0 281.088 43.264 281.088 96.576C793.152 176.192 667.264 219.456 512.064 219.456z"
                                    fill="#ffd5a4" p-id="1548"></path>
                            </svg>云盘存储空间2GB
                        </div>
                        <div class="item disable">
                            <svg t="1722392688965" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1747" width="20" height="20">
                                <path
                                    d="M648 377.6c18.2-2.2 37-3.5 56-4V254c-14.6 11.2-33.7 21-56 29.4v94.2zM856 894.3c35.5-10.8 56-24.6 56-35.6v-86c-14 9.7-33.3 17.8-56 24v97.6zM856 780c26.5-7.9 45.9-17.7 56-28V634.1c-14 9.7-33.3 17.8-56 24V780zM856 527.7v113.6c26.5-7.9 45.9-17.7 56-28V504.7c-14.8 9.3-34 17-56 23z"
                                    fill="#c2a079" p-id="1748"></path>
                                <path
                                    d="M939 439.2c-21.6-40.9-110.9-63.2-203-65.6V200c0-77.9-169-120-328-120S80 122.1 80 200v624c0 77.9 169 120 328 120 61.7 0 121.3-6 172.9-17.2 40 11.3 89.7 17.2 139.1 17.2 111.3 0 224-29.3 224-85.3v-408c0-4.6-1.9-8.6-5-11.5zM408 112c183.4 0 296 51.3 296 88s-112.6 88-296 88-296-51.3-296-88 112.6-88 296-88zM112 254c56.4 43.2 178.9 66 296 66 86.7 0 176.4-12.5 240-36.6 22.3-8.4 41.4-18.2 56-29.4v119.6c-19 0.5-37.8 1.8-56 4-70 8.4-129.9 29.1-147 61.6-3 2.9-5 7-5 11.5v48.8c-28.5 2.8-57.9 4.6-88 4.6-155.1 0-266.5-36.1-296-75.6V254z m0 197.2C159.4 492 272.6 520 408 520c30.1 0 59.5-1.7 88-4.5v191.9c-28.5 2.8-57.9 4.6-88 4.6-155.1 0-266.5-36.1-296-75.6V451.2zM408 912c-183.4 0-296-51.2-296-88V659.2C159.4 700 272.6 728 408 728c30.1 0 59.4-1.7 88-4.5v135.2c0 17.8 11.4 32.9 30.5 45.2-37.3 5.2-77.3 8.1-118.5 8.1z m504-53.3c0 10.9-20.5 24.8-56 35.6-33.4 10.2-80.1 17.7-136 17.7-115.4 0-192-32.1-192-53.3v-86c38.3 26.5 116.7 40.6 192 40.6 47.7 0 96.7-5.7 136-16.6 22.7-6.3 42-14.3 56-24v86z m0-106.7c-10.1 10.3-29.5 20.1-56 28-34.7 10.3-81.4 17.3-136 17.3-96.3 0-168.7-21.6-192-45.3V634.1c38.3 26.5 116.7 40.6 192 40.6 47.7 0 96.7-5.7 136-16.6 22.7-6.3 42-14.3 56-24V752z m0-138.7c-10.1 10.3-29.5 20.1-56 28-34.7 10.3-81.4 17.3-136 17.3-96.3 0-168.7-21.6-192-45.3V504.7c41.3 25.9 116.9 39.3 192 39.3 48.2 0 96.6-5.5 136-16.3 22-6 41.2-13.7 56-23v108.6zM720 512c-115.4 0-192-32.1-192-53.3 0-21.2 76.6-53.3 192-53.3s192 32.1 192 53.3c0 21.2-76.6 53.3-192 53.3z"
                                    fill="#c2a079" p-id="1749"></path>
                            </svg> 会员空间2T
                        </div>
                        <div class="item disable">
                            <svg t="1722392737899" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2889" width="20" height="20">
                                <path
                                    d="M811.4 368.9C765.6 248 648.9 162 512.2 162S258.8 247.9 213 368.8C126.9 391.5 63.5 470.2 64 563.6 64.6 668 145.6 752.9 247.6 762c4.7 0.4 8.7-3.3 8.7-8v-60.4c0-4-3-7.4-7-7.9-27-3.4-52.5-15.2-72.1-34.5-24-23.5-37.2-55.1-37.2-88.6 0-28 9.1-54.4 26.2-76.4 16.7-21.4 40.2-36.9 66.1-43.7l37.9-10 13.9-36.7c8.6-22.8 20.6-44.2 35.7-63.5 14.9-19.2 32.6-36 52.4-50 41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.3c19.9 14 37.5 30.8 52.4 50 15.1 19.3 27.1 40.7 35.7 63.5l13.8 36.6 37.8 10c54.2 14.4 92.1 63.7 92.1 120 0 33.6-13.2 65.1-37.2 88.6-19.5 19.2-44.9 31.1-71.9 34.5-4 0.5-6.9 3.9-6.9 7.9V754c0 4.7 4.1 8.4 8.8 8 101.7-9.2 182.5-94 183.2-198.2 0.6-93.4-62.7-172.1-148.6-194.9z"
                                    p-id="2890" fill="#c2a079"></path>
                                <path
                                    d="M376.9 656.4c1.8-33.5 15.7-64.7 39.5-88.6 25.4-25.5 60-39.8 96-39.8 36.2 0 70.3 14.1 96 39.8 1.4 1.4 2.7 2.8 4.1 4.3l-25 19.6c-5.3 4.1-3.5 12.5 3 14.1l98.2 24c5 1.2 9.9-2.6 9.9-7.7l0.5-101.3c0-6.7-7.6-10.5-12.9-6.3L663 532.7c-36.6-42-90.4-68.6-150.5-68.6-107.4 0-195 85.1-199.4 191.7-0.2 4.5 3.4 8.3 8 8.3H369c4.2-0.1 7.7-3.4 7.9-7.7zM703 664h-47.9c-4.2 0-7.7 3.3-8 7.6-1.8 33.5-15.7 64.7-39.5 88.6-25.4 25.5-60 39.8-96 39.8-36.2 0-70.3-14.1-96-39.8-1.4-1.4-2.7-2.8-4.1-4.3l25-19.6c5.3-4.1 3.5-12.5-3-14.1l-98.2-24c-5-1.2-9.9 2.6-9.9 7.7l-0.4 101.4c0 6.7 7.6 10.5 12.9 6.3l23.2-18.2c36.6 42 90.4 68.6 150.5 68.6 107.4 0 195-85.1 199.4-191.7 0.2-4.5-3.4-8.3-8-8.3z"
                                    p-id="2891" fill="#c2a079"></path>
                            </svg>同步相册训练
                        </div>
                        <div class="item disable">
                            <svg t="1722392793570" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3996" width="20" height="20">
                                <path
                                    d="M457.3 543.8L190.2 418.4c-14.3-8.1-31.8-8.1-46.1 0-15.5 9.1-25 25.7-25.1 43.7v320c-0.2 19.1 10.3 36.8 27.3 45.6l267.6 125.6c6.7 3.6 14.2 5.4 21.8 5.5 8.4-0.3 16.6-2.8 23.8-7.2 15.3-9.3 24.7-25.8 24.9-43.7V587.5c-0.7-18.4-11-35-27.1-43.7zM856.7 335.7c11.1-24.9-0.1-54.1-25-65.2L550.1 137.3a89.43 89.43 0 0 0-76 0L192.6 270.5c-11.2 5-20.1 13.9-25 25-11.1 24.9 0.1 54.1 25 65.2l296.2 139.4c7.2 3.8 15.2 5.9 23.4 6.1 8.1-0.3 16.1-2.4 23.4-6.1l296.2-139.4c11-4.9 19.9-13.9 24.9-25zM905.3 782.1V462.3c-0.1-18-9.7-34.5-25.1-43.7-13.9-8.2-31-8.6-45.2-1.1L566.1 543.8c-15.9 8.9-25.8 25.5-26.2 43.7v321.3c0.2 17.9 9.6 34.4 24.9 43.7 7.3 4.1 15.5 6.3 23.8 6.3 7.6 0 15.1-1.8 21.8-5.5l268.7-125.6c16.5-9.1 26.6-26.7 26.2-45.6z m-198.7 22L694.1 823l-23.5-11.2-23.6 35.6-12.5-6 23.5-35.5-23.5-11.2 12.5-18.9 23.5 11.2 23.5-35.5 12.5 6L683 793l23.6 11.1z m0-168.1l-33.2 17.2v33.1l-17.7 9.2v-33.1l-33.2 17.2V662l33.2-17.2v-33.1l17.7-9.2v33.1l33.2-17.2V636z m120.1 115.9L760 787.3v-17.6l66.7-35.5v17.7z m0-41.9L760 745.5v-17.7l66.7-35.5V710z m0-133L760 612.4v-17.6l66.7-35.5V577z"
                                    fill="#c2a079" p-id="3997"></path>
                            </svg> 专享VIP模型
                        </div>
                        <div class="item disable">
                            <svg t="1722392829716" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="5071" width="20" height="20">
                                <path
                                    d="M915.4 426.5c-18 4-30-4.9-33.8-15.6l-2.8-7.9-171.4 99-169.6-218.7-5.3 3.2c-4.7 2.8-8.5 5.2-11.7 7.1-5.2 3.2-10 6.3-11.6 6.5-1.1-0.4-3.8-3-6.2-5.3-2.4-2.2-5.3-5-9.1-8.3l-5.6-4.8-170.6 220-0.4 0.4-0.8-0.4-173.1-100-2.5 8.6c-2.2 7.7-9.3 20-32.3 16.8l-8-1.1v201.8c0 20.8 13.7 31.7 27.3 31.7s27.3-10.9 27.3-31.7V471.5l155.1 89.7c9 5.9 22.4 9.5 35.3-6.7l166.5-214.8 166.6 214.7c9.3 12 20.3 14.2 34.8 7.1l0.2-0.1L869 471.5v221.9c-0.6 2-1.6 2.6-3.9 2.6H119.3c-18.3 0-27.2 8.9-27.3 27.3v102.5c-0.1 9.5 2.4 16.8 7.4 21.5 4.3 4 10.1 6 17.3 6 0.9 0 1.9 0 2.8-0.1H903c11.8 0 20-11.3 20-27.4 0-16.1-8.2-27.4-20-27.4H146.8v-47.9H897c14.6-0.9 24.1-10.2 26.8-26.1l0.1-0.6V424.6l-8.5 1.9z"
                                    fill="#c2a079" p-id="5072"></path>
                                <path
                                    d="M513.1 170.7c-22.2 0-43 8.6-58.7 24.3-15.6 15.7-24.3 36.6-24.3 58.8 0 22.3 8.6 43.1 24.3 58.8 15.7 15.6 36.6 24.3 58.7 24.3 22.2 0 43-8.6 58.8-24.3 15.6-15.7 24.3-36.6 24.3-58.8 0-22.2-8.6-43.1-24.3-58.8-15.9-15.7-36.7-24.3-58.8-24.3z m36.9 83.1c0 9.9-3.8 19.2-10.8 26.2-7 7-16.4 10.8-26.2 10.8s-19.1-3.8-26-10.7c-7-7-10.8-16.4-10.8-26.2s3.8-19.2 10.8-26.2c6.8-6.8 16.3-10.8 26-10.8 9.9 0 19.2 3.8 26.2 10.8 7.1 7 10.9 16.3 10.8 26.1zM960 347.8c-13.7-13.8-32-21.4-51.5-21.4s-37.8 7.6-51.4 21.4c-13.8 13.7-21.4 32-21.4 51.5s7.6 37.8 21.4 51.4c13.7 13.8 32 21.4 51.5 21.4 19.6 0 37.9-7.6 51.4-21.4 13.8-13.7 21.4-32 21.4-51.5 0-19.4-7.6-37.7-21.4-51.4z m-24.6 51.5c0 7.1-2.8 13.8-7.9 18.9-5 5-11.9 7.9-18.9 7.9-7 0-13.9-2.9-18.9-7.9-5-5-7.9-11.9-7.9-18.9 0-7.1 2.8-13.8 7.9-18.9 5-5 11.9-7.9 18.9-7.9 7.1 0 13.8 2.8 18.9 7.9 5.1 5.2 7.9 11.9 7.9 18.9zM115.6 326.4c-19.6 0-37.9 7.6-51.6 21.5-13.7 13.7-21.3 32-21.3 51.5 0 19.4 7.6 37.7 21.4 51.4 13.8 13.8 32.1 21.4 51.5 21.4 19.6 0 37.9-7.6 51.4-21.4 13.7-13.6 21.3-31.9 21.3-51.5s-7.6-37.8-21.3-51.4c-13.6-13.9-31.9-21.5-51.4-21.5z m26.6 72.9c0 7.2-2.8 13.9-7.8 18.9-5 5-11.9 7.9-18.9 7.9-7.1 0-13.8-2.8-18.9-7.9l-0.1-0.1c-5-4.9-7.8-11.6-7.8-18.8 0-7.2 2.8-13.9 7.9-18.9 5-5 11.9-7.9 18.9-7.9 7.1 0 13.8 2.8 18.9 7.9 5.1 5.1 7.8 11.8 7.8 18.9z"
                                    fill="#c2a079" p-id="5073"></path>
                            </svg>超享会员特权
                        </div>
                    </div>
                </div>


            </div>
        </div>
        <!-- 个人会员信息查看结束 -->

        <div class="title-1">释放完整的心灵体验</div>
        <div class="title-2">
            升级您的AiSpace以解锁更多功能和覆盖范围
        </div>
        <div class="title-3">
            购买年费VIP<span class="bold">
                节省20%或者更多
            </span>
        </div>

        <div class="switch-month-year">
            <span :class="payType == 'month' ? 'pay-active' : ''" @click="changePayType('month')">月付</span>
            <span :class="payType == 'year' ? 'pay-active' : ''" @click="changePayType('year')">年付</span>
        </div>

        <!-- VIP 会员开始 -->
        <div class="vip-list">
            <div class="vip-item" :class="v.class" v-for="(v, i) of vipItems" :key="i">
                <div v-if="v.class == 'plus'" class="header">
                    最流行的选择 <i class="el-icon-magic-stick"></i>
                </div>
                <div class="padding" style="padding:15px 10px;height: 520px;">
                    <div class="title">{{ v.title }}</div>
                    <div>{{ v.desc }}</div>
                    <div class="price" v-if="payType == 'month'">
                        <span class="value">RMB {{ v.monthPrice }}</span>
                        <span class="time">/月</span>
                    </div>
                    <div class="price" v-else>
                        <span class="value">RMB {{ v.yearPrice }}</span>
                        <span class="time">/年</span>
                    </div>
                    <div :class="v.class + '-pay-btn'" @click="joinNow(v)">现在加入</div>
                    <div class="feature">{{ v.feature }}</div>
                    <div class="feature-item">
                        <i class="el-icon-success"></i>
                        <span class="item-desc" v-if="payType == 'month'"> {{ v.monthPrice }}能量赠送</span>
                        <span class="item-desc" v-else> {{ v.yearPrice }}能量赠送</span>
                    </div>
                    <div class="feature-item" v-for="(f, j) of v.features" :key="j">
                        <i class="el-icon-success"></i>
                        <span class="item-desc">{{ f }}</span>
                    </div>

                </div>
            </div>
        </div>
        <!-- VIP 会员结束 -->

        <div class="contrast" style="width: 80%;margin: 0 auto;">
            <!-- 所有特性对比开始 -->
            <div class="compare-title">
                所有功能对比
            </div>
            <div class="desc">
                不同的会员将让你的身份不一样。
            </div>
            <div class="compare-vip">
                <div class="item free">
                    <div class="title">免费</div>
                    <div class="price">
                        <span class="value">RMB0</span>
                        <span class="unit">/月</span>
                    </div>
                    <div class="free-btn">
                        从这里开始
                    </div>
                </div>
                <div class="item plus">
                    <div class="title">Plus</div>
                    <div class="price">
                        <span class="value">RMB5</span>
                        <span class="unit">/月</span>
                    </div>
                    <div class="plus-btn" @click="upgradeNow">获取Plus</div>
                </div>
                <div class="item compare-pro">
                    <div class="title">Pro</div>
                    <div class="price">
                        <span class="value">RMB10</span>
                        <span class="unit">/月</span>
                    </div>
                    <div class="pro-btn" @click="upgradeNow">获取Pro</div>
                </div>
            </div>
            <!-- 所有特性对比结束 -->

            <!-- 通用开始 -->
            <div class="class-title general">
                通用
            </div>
            <div class="class-item baseline">
                <div class="name">创建文本，图像和视频帖子</div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
            </div>
            <div class="class-item baseline">
                <div class="name">创建群组</div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
            </div>
            <div class="class-item baseline">
                <div class="name">视频上传大小限制</div>
                <div class="gou">
                    20M
                </div>
                <div class="gou">
                    40M
                </div>
                <div class="gou">
                    60M
                </div>
            </div>
            <div class="class-item">
                <div class="name">发布广告和创建NFT</div>
                <div class="gou">
                    -
                </div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
            </div>
            <div class="class-item">
                <div class="name">创建附带能量的帖子</div>
                <div class="gou">
                    -
                </div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
            </div>
            <div class="class-item">
                <div class="name">社区贡献占比</div>
                <div class="gou">
                    小
                </div>
                <div class="gou">
                    高
                </div>
                <div class="gou">
                    最高
                </div>
            </div>
            <!-- 通用结束 -->

            <!-- 收益开始 -->
            <div class="class-title earning">
                收益
            </div>
            <div class="class-item baseline">
                <div class="name">是否可以获取系统积分或能量奖励</div>
                <div class="gou">
                    -
                </div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
            </div>
            <div class="class-item baseline">
                <div class="name">是否获取广告和帖子中的能量</div>
                <div class="gou">
                    -
                </div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
            </div>
            <div class="class-item baseline">
                <div class="name">是否可以被打赏</div>
                <div class="gou">
                    -
                </div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
            </div>
            <div class="class-item">
                <div class="name">开通广告权益</div>
                <div class="gou">
                    -
                </div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
            </div>
            <div class="class-item">
                <div class="name">获取NFT收益</div>
                <div class="gou">
                    -
                </div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
                <div class="gou">
                    <i class="el-icon-success"></i>
                </div>
            </div>
            <!-- 收益结束 -->

            <h1>支持互联网自由</h1>
            <p>
                让你的思想更加开放和安全不仅仅是解锁这些功能特性，这将是我们共同努力使命的动力。AiSpace不仅仅是一个平台，它是一场争取互联网自由的运动，这场运动是由你们这样的人推动的。

            </p>
            <p>
                通过贡献，这将是你们主张一个自由数字世界的必要性，确保这个平台继续成为我们开放话语和多样化思想的灯塔。
            </p>

            <div class="upgrade-now-btn" @click="upgradeNow">现在升级</div>


        </div>

        <div class="vip-detail-black-bg">
            <img src="https://cms.minds.com/uploads/Minds_First_0196ca4d85.png" alt="">
            <div class="text">
                <h1>AiSpacePlus</h1>
                <p>Plus会员是专为创作者设计的升级版。获得更多的影响力，赚钱的机会，以及额外的津贴来支持AiSpace及其社区。</p>
                <div class="btn" @click="upgradeNow">获取Plus</div>
            </div>
        </div>
        <div class="vip-detail-white-bg">
            <div class="text">
                <h1>AiSpacePro</h1>
                <p>Pro会员增加你的内容的浏览量。将你的网络能量化。在去中心化的社交网络中把控你的身份。</p>
                <div class="btn" @click="upgradeNow">获取Pro</div>
            </div>
            <img src="https://cms.minds.com/uploads/Pro_1_16dd59b4c6.png" alt="">
        </div>

        <h1 class="get-more-reach-earn">获取更多功能&收益</h1>
        <p class="get-more-reach-earn-p">今天就升级你的AiSpace以获得更多的覆盖范围、赚钱机会和增强你的社交体验的功能。</p>
        <div class="upgrade-now-btn" @click="upgradeNow">
            现在升级
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from "element-plus"
import {useRouter} from "vue-router"

const router = useRouter()

const vipItems = [

    {
        class: "free",
        title: "免费",
        desc: "富有特色的初代AiSpace产品",
        monthPrice: 0,
        yearPrice: 0,
        feature: "免费功能",
        features: [
            "发布普通帖子",
            "创建群组",
            "查看热门帖子广告",
            "NFT内容查看",
            "领取免费NFT",
            "加入群组",
            "查看源代码",
        ]
    },
    {
        class: "plus",
        title: "Plus版",
        desc: "最理想的AiSpace产品",
        monthPrice: 5,
        yearPrice: 20,
        feature: "所有免费功能+Plus：",
        features: [
            "Plus会员标识",
            "创建NFT",
            "获取广告收益",
            "获取帖子收益",
            "获取积分",
            "发布广告",
            "发布带有能量的帖子",
        ]
    }
    ,
    {
        class: "pro",
        title: "Pro版",
        desc: "独立开发内容的AiSpace产品",
        monthPrice: 10,
        yearPrice: 30,
        feature: "所有Plus功能+Pro：",
        features: [
            "Pro会员标识",
        ]
    }

]

const payType = ref("month")
// 当前选中VIP
const choiceVip = ref({})

// 加入会员
const joinNow = (vip) => {
    if (vip.class != "free") {
        choiceVip.value = vip
        choiceVip.value.timeType = payType.value
    } else {
        ElMessage({
            message: "加入成功",
            type: "success",
            showClose: true,
        })
    }
}

// 返回
const goBack = ()=>{
    router.back();
}

const changePayType = (type) => {
    payType.value = type;
}

const upgradeNow = () => {
    var div = document.getElementById("vip-page")
    div.scrollTo({
        top: 400,
        behavior: 'smooth'
    })
}

</script>

<style  scoped>
#vip-page {
    height: 100vh;
    overflow: scroll;
    overflow: auto;
    scrollbar-width: thin;
    /* 定义滚动条的宽度 */
    scrollbar-color: transparent transparent;
    /* 定义滚动条的颜色 */
}

#vip-page .user-vip {
    background-image: linear-gradient(to right, #4c403a, #2d2623);
    padding: 50px;
}

#vip-page .user-vip .description {
    width: 70%;
    background-color: #fff;
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    border-radius: 5px;
}

#vip-page .user-vip .description .left {
    width: 30%;
    background-color: #2e261c;
    border-start-start-radius: 5px;
    border-end-start-radius: 5px;
    padding: 30px;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
}


#vip-page .user-vip .description .left .name {
    color: white;
    font-size: 20px;
    margin-top: 20px;
}

#vip-page .user-vip .description .left .vip {
    color: gray;
    font-size: 12px;
    line-height: 24px;
}

#vip-page .user-vip .description .left .el-button {
    width: 200px;
    height: 50px;
    margin-top: 40px;
}

#vip-page .user-vip .description .left img {
    width: 100px;
    height: 100px;
    border-radius: 100px;
}

#vip-page .user-vip .description .right {
    width: 70%;
    padding: 20px;
    background-color: rgb(38, 28, 28);
}

#vip-page .user-vip .description .right .rights {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    color: #ffd5a4;
    align-items: center;
}

#vip-page .user-vip .description .right .rights .item {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
    margin: 5px;
    border: 1px solid #ffd5a4;
    padding: 3px;
    font-size: 14px;
    border-radius: 5px;
}

#vip-page .user-vip .description .right .rights .disable {
    cursor: not-allowed;
    color: #c2a079;
    border: 1px solid #c2a079;
}

#vip-page .user-vip .description .right .storage {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
}

#vip-page .user-vip .description .right .storage .progress-bar {
    width: 100%;
    border-color: transparent;
    border: 1px solid #f8d4a990;
    border-radius: 5px;
    height: 10px;
    overflow: hidden;
}

#vip-page .user-vip .description .right .storage .progress-fill {
    height: 100%;
    background-image: linear-gradient(to right, #f8d4a9, #ffd5a4);
    border-radius: 5px;
    transition: width 0.3s ease;
}

#vip-page .user-vip .description .right .storage .precent {
    margin-left: 20px;
    color: #ffd5a4;
}


#vip-page .user-vip .description .right .label {
    color: #f8d4a9;
    font-size: 18px;
    margin-bottom: 20px;
}

#vip-page .user-vip .description .right :first-child span {
    color: #ffd5a4;
    font-weight: 900;
    margin-left: 15px;
}


/* 隐藏滚动条 */
#vip-page::-webkit-scrollbar {
    width: 0px;
    /* 定义滚动条宽度 */
    height: 0px;
    background-color: transparent;
    /* 滚动条背景颜色 */
}

#vip-page::-webkit-scrollbar-thumb {
    background-color: transparent;
    /* 滚动条滑块颜色 */
    border-radius: 4px;
    /* 滚动条滑块圆角 */
}

#vip-page ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.2);
    /* 鼠标悬停时滚动条滑块颜色 */
}


#vip-page .title-1 {
    text-align: center;
    margin-top: 100px;
    font-size: 25px;
    font-weight: 540;
}

#vip-page .title-2 {
    text-align: center;
    margin-top: 30px;
    font-size: 35px;
    font-weight: bolder;
}

#vip-page .title-3 {
    margin-top: 80px;
    text-align: center;
    font-size: 15px;
}

#vip-page .title-3 .bold {
    font-weight: bolder;
}

#vip-page .switch-month-year {
    width: 180px;
    margin: 20px auto;
    border: 1px solid gray;
    border-radius: 20px;
    height: 40px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-evenly;
    align-items: center;
    cursor: pointer;
}

#vip-page .switch-month-year span {
    width: 85px;
    height: 35px;
    line-height: 35px;
    text-align: center;
}

#vip-page .switch-month-year .pay-active {
    background-color: black;
    color: white;
    border-radius: 17px;
}


#vip-page .vip-list {

    width: 60%;
    margin: 150px auto;
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    align-items: flex-end;
}


#vip-page .vip-list .plus {
    width: 30%;
    border: 1px solid black;
    border-radius: 10px;
}

#vip-page .vip-list .vip-item .header {
    height: 32px;
    background-color: black;
    color: white;
    text-align: center;
    font-size: 16px;
    line-height: 32px;
    border-radius: 10px 10px 0 0;
}

#vip-page .vip-list .free,
.pro {
    width: 30%;
    border: 1px solid rgb(192, 188, 188);
    border-radius: 10px;
}

#vip-page .vip-list .vip-item .title {
    font-size: 27px;
    font-weight: bold;

}

#vip-page .vip-list .vip-item .desc {
    font-size: 16px;
    line-height: 32px;
}


#vip-page .vip-list .vip-item .price {
    margin-top: 20px;
}


#vip-page .vip-list .vip-item .price .value {
    font-size: 27px;
    font-weight: bold;
}




#vip-page .vip-list .vip-item .plus-pay-btn,
.pro-pay-btn {
    width: 80%;
    background-color: black;
    margin: 30px auto;
    text-align: center;
    padding: 10px 20px;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    border: 1px solid black;
    cursor: pointer;
}

#vip-page .vip-list .vip-item .plus-pay-btn:hover,
.pro-pay-btn:hover {
    color: black;
    background-color: white;
    border: 1px solid black;
}

#vip-page .vip-list .vip-item .feature {
    font-weight: bold;
    font-size: 16px;
    margin: 20px 0;
}

#vip-page .vip-list .vip-item .feature-item {
    font-size: 16px;
    line-height: 32px;
}

#vip-page .vip-list .vip-item .feature-item .item-desc {
    margin-left: 20px;
}


#vip-page .compare-title {
    text-align: center;
    margin-top: 30px;
    font-size: 35px;
    font-weight: bolder;
}

#vip-page .desc {
    text-align: center;
    font-size: 16px;
    line-height: 64px;
}

#vip-page .compare-vip {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
}

#vip-page .compare-vip .item {
    padding: 15px 10px;
    border: 1px solid gray;
    border-radius: 8px;
    margin: 10px;
}

#vip-page .compare-vip .item .title {
    font-size: 25px;
    font-weight: bold;
    margin: 10px 0;
}

#vip-page .compare-vip .item .price {
    margin: 15px 0;
}

#vip-page .compare-vip .item .price .value {
    font-size: 25px;
    font-weight: bold;
}

#vip-page .compare-vip .item .free-btn {
    width: 190px;
    font-size: 15px;
    line-height: 30px;
    background-color: gray;
    text-align: center;
    padding: 5px 15px;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    border: 1px solid gray;
    cursor: pointer;
}


#vip-page .compare-vip .item .free-btn:hover {
    background-color: white;
    color: gray;
}

#vip-page .compare-vip .item .pro-btn,
.plus-btn {
    width: 190px;
    font-size: 15px;
    line-height: 30px;
    background-color: black;
    text-align: center;
    padding: 5px 15px;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    border: 1px solid black;
    cursor: pointer;
}


#vip-page .compare-vip .item .pro-btn:hover,
.plus-btn:hover {
    background-color: white;
    color: black;
}

#vip-page .class-title {
    font-size: 23px;
    background-color: #e8e8ea;
    padding: 10px 20px;
    border-radius: 10px;
}

#vip-page .class-item {
    display: flex;
    display: -webkit-flex;
    line-height: 40px;
    padding: 10px;
}

#vip-page .baseline {
    border-bottom: 1px solid #d8d8d8;

}

#vip-page .class-item div {
    width: 25%;
}

#vip-page .class-item .gou {
    text-align: center;
}

#vip-page .contrast h1 {
    text-align: center;
    margin-top: 350px;
}

#vip-page .contrast p {
    font-size: 16px;
    text-align: center;
    width: 60%;
    margin: 30px auto;
    line-height: 32px;
}

#vip-page .upgrade-now-btn {
    font-size: 16px;
    line-height: 32px;
    width: 170px;
    margin: 100px auto;
    color: white;
    background-color: black;
    text-align: center;
    padding: 7px 16px;
    border-radius: 24px;
    cursor: pointer;
}

#vip-page .upgrade-now-btn:hover {
    background-color: #fff;
    color: black;
    border: 1px solid black;
}

#vip-page .vip-detail-black-bg {
    height: 100vh;
    background-color: black;
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    align-items: center;
    color: white;
}

#vip-page .vip-detail-white-bg {
    height: 100vh;
    background-color: white;
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    align-items: center;
    color: black;
}

#vip-page .vip-detail-black-bg img {
    width: 50%;
}

#vip-page .vip-detail-white-bg img {
    width: 50%;
}

#vip-page .vip-detail-black-bg .text {
    width: 20%;
}



#vip-page .vip-detail-white-bg .text {
    width: 20%;
}

#vip-page .vip-detail-black-bg .text .btn {
    padding: 10px 20px;
    background-color: #fff;
    color: black;
    width: 30%;
    text-align: center;
    border-radius: 10px;
    border: 1px solid white;
    cursor: pointer;
}

#vip-page .vip-detail-white-bg .text .btn {
    padding: 10px 20px;
    background-color: black;
    color: white;
    width: 30%;
    text-align: center;
    border-radius: 10px;
    border: 1px solid black;
    cursor: pointer;
}

#vip-page .vip-detail-black-bg .text .btn:hover {
    background-color: black;
    color: white;
}


#vip-page .vip-detail-white-bg .text .btn:hover {
    background-color: white;
    color: black;
}

#vip-page .get-more-reach-earn {
    text-align: center;
    margin-top: 200px;
    margin-bottom: 100px;
}

#vip-page .get-more-reach-earn-p {
    text-align: center;
}

#vip-page .upgrade-now-btn {
    font-size: 16px;
    line-height: 32px;
    width: 170px;
    margin: 100px auto;
    color: white;
    background-color: black;
    text-align: center;
    padding: 7px 16px;
    border-radius: 24px;
    cursor: pointer;
    border: 1px solid black;

}

#vip-page .upgrade-now-btn:hover {
    background-color: white;
    color: black;

}
</style>